<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<script type="text/javascript">
var updateConnectStatus = '';
var pushIndex = -1;

$(document).ready(function()
{
	clearInterval(updateConnectStatus);
	updateConnectStatus = setInterval("getConnectStatus()", 10000);
	
	$('#start-btn').on('click', function() 
	{
		$('#start-btn').addClass('disabled');
		$('#stop-btn').removeClass('disabled');
		startService();
 	});

	$('#stop-btn').on('click', function() 
	{
		$('#start-btn').removeClass('disabled');
		$('#stop-btn').addClass('disabled');
		stopService();
 	});
	$('#download-btn').on('click',function(){
		downloadService();
	});
});


function downloadService(){
	var form=$("<form>");//定义一个form表单
	form.attr("style","display:none");
	form.attr("target","");
	form.attr("method","post");
	form.attr("action","/f?event=download");
	var input1=$("<input>");
	input1.attr("type","hidden");
	input1.attr("name","exportData");
	input1.attr("value",(new Date()).getMilliseconds());
	$("body").append(form);//将表单放置在web中
	form.append(input1);
	form.submit();//表单提交 
}

function isRunning()
{
	send('/f', 'event=t', function callbackComplete(jqXHR, textStatus)
	{}, 
	function callbackError(jqXHR, textStatus, errorThrown)
	{
		$('#message-body').text(errorThrown);
		//$('#message-dialog').modal('show');
	}, 
	function callbackSuccess(data, textStatus, jqXHR)
	{
		var info = JSON.parse(data);
		
		if(info.code == '00000')
		{
			if(info.running == 'true')
			{
				$('#stop-btn').removeClass('disabled');
			}
			else
			{
				$('#start-btn').removeClass('disabled');
			}
		}
		else
		{
			$('#message-body').text(info.message);
			$('#message-dialog').modal('show');
		}
	});
}

function startService()
{
	send('/f', 'event=s', function callbackComplete(jqXHR, textStatus)
	{}, 
	function callbackError(jqXHR, textStatus, errorThrown)
	{
		$('#message-body').text(errorThrown);
		//$('#message-dialog').modal('show');
	}, 
	function callbackSuccess(data, textStatus, jqXHR)
	{
		var info = JSON.parse(data);
		
		//updateConnectStatus = setInterval("getConnectStatus()", 1000);
		
		//$('#message-body').text(info.message);
		//$('#message-dialog').modal('show');
	});
}

function stopService()
{
	send('/f', 'event=e', function callbackComplete(jqXHR, textStatus)
	{}, 
	function callbackError(jqXHR, textStatus, errorThrown)
	{
		$('#message-body').text(errorThrown);
		$('#message-dialog').modal('show');
	}, 
	function callbackSuccess(data, textStatus, jqXHR)
	{
		var info = JSON.parse(data);
		
		$('#connect-status').html('');
		//$('#message-body').text(info.message);
		//$('#message-dialog').modal('show');
	});
}

function getConnectStatus()
{
	send('/f', 'event=g&src=' + pushIndex, function callbackComplete(jqXHR, textStatus)
	{}, 
	function callbackError(jqXHR, textStatus, errorThrown)
	{
		$('#message-body').text(errorThrown);
		//$('#message-dialog').modal('show');
	}, 
	function callbackSuccess(data, textStatus, jqXHR)
	{
		var info = JSON.parse(data);
		
		if(info.code == '00000')
		{
			if(info.running == 'true')
			{
				
				$('#start-btn').removeClass('disabled');
				$('#stop-btn').removeClass('disabled');
				
				$('#start-btn').addClass('disabled');
				$('#stop-btn').removeClass('disabled');
				
				if(info.host.length > 0)
				{
					var s = '';
					
					for(i = 0 ; i < info.host.length ; i++)
					{
						s += '(' +info.host[i].ip + '_' + (info.host[1].status == '0' ? "连线中" : "<font style=\"color:#990000;\">断线中</font>") + '),';
					}

					s += '数据比对中.....';
					
					$('#w-btn').text('发送报文数量:' + info.w);
					$('#r-btn').text('回应报文数量:' + info.r);
					$('#connect-status').html(s);
				}
				
				if(info.push.length > 0)	
				{
					$('#list-tbody').html("");
					for(i = 0 ; i < info.push.length ; i++)
					{
						
						var data = info.push[i];
						for( var linekey in data){
							
							var linedata = data[linekey];
							 $('#list-tbody').append('<tr>');
							<c:forEach items="${hosts}" var="item">
								  for( j = 0 ; j<linedata.length; j++){
									  var host = linedata[j].host;
									  host = host.substr(0,host.lastIndexOf(':'));
									  if('${item[1]}'.indexOf(host) != -1){
										  var date = '<td>'+linedata[j].date+'</td>';
										  $('#list-tbody').append(date);
										  var time = '<td>'+linedata[j].time+'</td>';
										  $('#list-tbody').append(time);
										  
										  color = linedata[j].firstPrice_flag == '1'?'style=\"color: #ff0000;\"':'';
										  var firstPrice = '<td '+color +' >'+linedata[j].firstPrice+'</td>';
										  $('#list-tbody').append(firstPrice);
										  
										  color = linedata[j].highPrice_flag == '1'?'style=\"color: #ff0000;\"':'';
										  var highPrice = '<td '+color +' >'+linedata[j].highPrice+'</td>';
										  $('#list-tbody').append(highPrice);
										  
										  color = linedata[j].lowPrice_flag == '1'?'style=\"color: #ff0000;\"':'';
										  var lowPrice =  '<td '+color +' >'+linedata[j].lowPrice+'</td>';
										  $('#list-tbody').append(lowPrice);
										  
										  color = linedata[j].lastPrice_flag == '1'?'style=\"color: #ff0000;\"':'';
										  var lastPrice =  '<td '+color +' >'+linedata[j].lastPrice+'</td>';
										  $('#list-tbody').append(lastPrice);
										  
										  color = linedata[j].volume_flag == '1'?'style=\"color: #ff0000;\"':'';
										  var volume =  '<td '+color +' >'+linedata[j].volume+'</td>';
										  $('#list-tbody').append(volume);
										  
										  color = linedata[j].reference_flag == '1'?'style=\"color: #ff0000;\"':'';
										  var reference =  '<td '+color +' >'+linedata[j].reference+'</td>';
										  $('#list-tbody').append(reference);
									  }
								  }
							</c:forEach>
							$('#list-tbody').append('</tr>');
						}

					}
					
					pushIndex = parseInt(info.index);
				}
			}
			else
			{
				$('#connect-status').html('');
				
				$('#start-btn').removeClass('disabled');
				$('#stop-btn').removeClass('disabled');
				
				$('#start-btn').removeClass('disabled');
				$('#stop-btn').addClass('disabled');
			}
		}
		else
		{
			$('#message-body').text(info.message);
			$('#message-dialog').modal('show');
		}
	});
}
</script>
<div class="row">
  <button type="button" id="start-btn" class="btn btn-primary disabled">启动比对行情</button>
  <button type="button" id="stop-btn" class="btn btn-danger disabled">停止比对行情</button>
  <button type="button" id="download-btn" class="btn btn-danger">下载比对行情</button>
  <button type="button" id="w-btn" class="btn btn-default disabled"></button>
  <button type="button" id="r-btn" class="btn btn-default disabled"></button>
  <p/>
  <div class="panel panel-default">
    <div id="connect-status" class="panel-body"></div>
  </div>
</div>
<div class="row">
  <table class="mitake-table" border="1">
    <thead id="list-thead">
    <tr>
      <c:forEach items="${hosts}" var="item">
         <th colspan="8">${item[3] }&nbsp; ${item[1]}</th>
      </c:forEach>
    </tr>
    <tr>
       <c:forEach items="${hosts}" var="item">
           <th>日期</th>
           <th>时间</th>
           <th>开</th>
           <th>高</th>
           <th>低</th>
           <th>收</th>
           <th>量</th>
           <th>参考价</th>
       </c:forEach>
    </tr>
    </thead>
    <tbody id="list-tbody">
    </tbody>
  </table>
</div>

